<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #sign {
        width: 200px;
        height: 100px;
        /* 属性设置一个元素的垂直对齐方式 */
        vertical-align: middle;
        /* 禁止放大缩小输入框 */
        resize: none;
      }
    </style>
  </head>
  <body>
    <!-- label提示语，一般和input结合使用 
    --for填写对应的input id值，点击label就相当于点击input
    -->
    <!-- 
    --input type=text时表示输入框，是行内块元素
    --type="password"时会是密文状态
    --type="number"只能填入数字
    --type="radio"单选框
    --type="checkbox" 复选框
    --placeholder 占位符 内容为空时显示，当用户输入时会消失
    --autocomplete=off/on 自动提示关闭/开启
    --name="gender"同name同一组选框
    -->
    <label for="username">用户：</label
    ><input
      type="text"
      id="username"
      placeholder="请输入账号"
      autocomplete="off"
    />
    <br />
    <hr />
    <label for="password">密码：</label
    ><input
      type="password"
      id="password"
      placeholder="请输入密码"
      autocomplete="off"
    />
    <hr />
    <p>性别：</p>
    <label for="man">男</label><input type="radio" id="man" name="gender" />
    <label for="women">女</label
    ><input type="radio" id="women" name="gender" />
    <label for="undefined">未知</label
    ><input type="radio" id="undefined" name="gender" />
    <hr />
    <p>爱好：</p>
    <label for="chif">吃饭</label
    ><input type="checkbox" name="habit" id="chif" />
    <label for="shuijiao">睡觉</label
    ><input type="checkbox" name="habit" id="shuijiao" />
    <label for="chang">唱</label
    ><input type="checkbox" name="habit" id="chang" />
    <label for="tiao">跳</label
    ><input type="checkbox" name="habit" id="tiao" />
    <label for="rap">rap</label><input type="checkbox" name="habit" id="rap" />
    <hr />
    <!-- 
    --select 下拉列表
    --option中value没值会返回option内容，value有值返回值
    -->
    <label for="what">下午做什么：</label>
    <select name="" id="what">
      <option value="">玩一天游戏</option>
      <option value="">玩一小时游戏</option>
      <option value="">一直玩游戏</option>
      <option value="">玩游戏到天黑</option>
    </select>
    <hr />
    <!-- 文本域
    --cols="30" rows="10" 30列（30bit,英文2=中文1） 10行
    -->
    <label for="sign">个性签名：</label>
    <textarea id="sign" cols="30" rows="10"></textarea>
    <br />
    <hr />
    <button>ojbk</button>
  </body>
</html>
